// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// Licensed under the 【火山方舟】原型应用软件自用许可协议
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at 
//     https://www.volcengine.com/docs/82379/1433703
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { FloatingPanel, FloatingPanelRef } from 'antd-mobile';
import styles from './index.module.less';
import { closeApp } from 'multi-modal-sdk';
import { Image } from 'antd-mobile';
import { ActionDetail, Good } from '../../../../types';
import { LLMApi } from '../../../../api/llm';
import MockGood from '../../../../images/mock_good_1.png?inline'

interface TProps {
  thumbnails: { [index: number]: string }; // 框选范围的缩略图
  onSelectThumbnail: (index: number,label: string) => void;
  notPassed: boolean;
  selectThumbnailsIndex: number;
  setSelectThumbnailsIndex: (index: number) => void;
}
export const ResultPanel = forwardRef((props: TProps, ref) => {
  const { thumbnails, notPassed, onSelectThumbnail, selectThumbnailsIndex, setSelectThumbnailsIndex } = props;
  const thumbnailCount = Object.keys(thumbnails).length;
  const floatingPanelRef = React.useRef<FloatingPanelRef>(null);
  // 查询到的商品详情
  const [actionDetail, setActionDetail] = useState<{ [index: number]: ActionDetail }>({});

  const initRef = useRef(false);
  const [searchFinished, setSearchFinished] = useState<{ [index: string]: boolean }>({});
  const outputGoods = actionDetail[selectThumbnailsIndex]?.tool_details[0]?.output || []
  useImperativeHandle(ref, () => ({
    search: (base64: string , index: number ,refresh: boolean) => {
      search(base64, index, refresh);
    }
  }));
  useEffect(() => {
    floatingPanelRef?.current?.setHeight(window.innerHeight * ( notPassed ? 0.92 : 0.5))

  }, [floatingPanelRef,notPassed])
  useEffect(() => {
    if (notPassed || thumbnailCount === 0 || !thumbnails[selectThumbnailsIndex] || searchFinished[selectThumbnailsIndex]) {
      return;
    }

    Array(thumbnailCount).fill(0).forEach((_, index) => {
      search(thumbnails[index], index);
    })

  }, [thumbnails, selectThumbnailsIndex])


  const search = (base64: string , index: number, refresh?: boolean) => {
    setSearchFinished(pre => ({
      ...pre,
      [index]: false
    }))
    const llmApi = new LLMApi();
    
    llmApi.Chat(base64).then((resp) => {
      const { cb }  = resp || {};
      if(!cb){
        return;
      }
      cb((data) => {

        setActionDetail(pre => {
          return {
            ...pre,
            [String(index)]: data
          }
        })
        setSearchFinished(pre => ({
          ...pre,
          [index]: true
        }))
        if((!initRef.current && index === selectThumbnailsIndex) || refresh){
          onSelectThumbnail?.(-1, data?.tool_details[0]?.output[0]?.子类别 || '');
          initRef.current = true;
        }

      },(finalData)=>{
        if(!finalData){
          setActionDetail(pre => {
            return {
              ...pre,
              [String(index)]: null
            }
          })
          setSearchFinished(pre => ({
            ...pre,
            [index]: true
          }))
          onSelectThumbnail?.(-1, '');
        }
      })
    }).catch(err => {
      console.error('[call llm api error]', err)
    })
  }


  const renderGood = (good: Good, index: number) => {
    return (
      <div key={index} className='flex flex-col w-fit bg-white rounded-lg relative'>
        <div className='w-[170px] h-[170px]' ><Image placeholder={<div className='!h-full !w-full bg-[#ECEFF2] rounded-[6px] '></div>} lazy className={` ${good?.mock ? ' object-fill  !h-full' : ''}  rounded-lg !w-full`} src={good.图片链接} /></div>

        {good?.mock && <span className={`opacity-50 text-[9px] text-white absolute top-[9px] px-3`}>由于合规问题，当前搜索结果仅为功能展示</span>}
        {good?.mock && <span className={`text-white absolute top-[35%] left-[50%] translate-x-[-50%] translate-y-[-35%] px-[7px] py-[6px] bg-[#0a0808cc] text-white`}>示例图</span>}
        <div className='flex flex-col p-2'>
          <div>{good.名称}</div>
          <div><span className='text-[#F34] text-[13px] '>¥</span><span className='text-[#F34] font-medium text-lg'>{good.价格}</span><span className='text-xs text-[#16182373]'> 已售{good.销量}+件</span></div>
          <div className='w-fit py-1 px-[6px] flex items-center gap-[10px] rounded-[100px] text-[#16182399] bg-[#16182308]'>OEADN旗舰店 进店 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
            <path d="M4 2L7 5L4 8" stroke="#16182399" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round" />
          </svg></div>
        </div>
      </div>
    )
  }
  const renderPlaceholder = (index: number) => {
    return (
      <div key={index} className='flex flex-col bg-white rounded-lg relative w-[170px] h-[261px]'>
        <div className='h-[174px] mt-2 w-[154px] mx-2 bg-[#ECEFF2] rounded-lg ' ></div>
        <div className='flex flex-col p-2 gap-2'>
          <div className='w-[40%] h-4 bg-[#ECEFF2]  rounded-[2px]'></div>
          <div className='w-full h-4 bg-[#ECEFF2] rounded-[2px]'></div>
          <div className='w-[70%] h-4 bg-[#ECEFF2] rounded-[2px]'></div>
        </div>
      </div>
    )
  }


  return (
    <FloatingPanel
      ref={floatingPanelRef}
      className={`${styles.panel} ${styles.panelHeaderColored} `}
      anchors={[...(!notPassed ? [150, window.innerHeight * 0.5] : []), window.innerHeight * 0.92]}
    >
      {notPassed && <div className='mx-4 relative h-full pb-5 pt-[15px]'>
        <div className="font-semibold text-[22px] text-black relative  ">识别错误 <svg className='absolute  top-1 right-0' onClick={() => {
          closeApp()
        }} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M6.06007 6.06004L17.9395 17.9394" stroke="#42464E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          <path d="M17.94 6.06011L6.0606 17.9395" stroke="#42464E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg> </div>
        <div className="flex justify-center mt-[140px] "><svg width="320" height="257" viewBox="0 0 320 257" fill="none" xmlns="http://www.w3.org/2000/svg">
          <ellipse cx="159.999" cy="207.129" rx="159.927" ry="49.6916" fill="url(#paint0_linear_2215_183427)" />
          <rect x="139.438" y="100.32" width="75.3942" height="77.6788" rx="11.4234" fill="url(#paint1_linear_2215_183427)" />
          <mask id="mask0_2215_183427" className="mask-type:alpha" maskUnits="userSpaceOnUse" x="139" y="100" width="76" height="78">
            <rect x="139.438" y="100.32" width="75.3942" height="77.6788" rx="11.4234" fill="url(#paint2_linear_2215_183427)" />
          </mask>
          <g mask="url(#mask0_2215_183427)">
            <g filter="url(#filter0_f_2215_183427)">
              <rect x="139.438" y="172.288" width="71.9672" height="11.4234" rx="5.71168" fill="#BDBEBE" />
            </g>
            <g filter="url(#filter1_f_2215_183427)">
              <rect x="190.843" y="176.857" width="73.1095" height="7.99635" rx="3.99818" transform="rotate(-90 190.843 176.857)" fill="#DADADA" />
            </g>
          </g>
          <rect x="101.74" y="72.9043" width="99.3832" height="105.095" rx="12.5657" fill="url(#paint3_linear_2215_183427)" />
          <path d="M167.425 90.0393C167.425 94.1294 165.8 98.0519 162.908 100.944C160.016 103.836 156.093 105.461 152.003 105.461C147.913 105.461 143.991 103.836 141.099 100.944C138.206 98.0519 136.582 94.1294 136.582 90.0393" stroke="#D7DCE0" stroke-width="3.42701" />
          <rect x="126.871" y="163.149" width="49.1204" height="3.42701" fill="#D7DCE0" />
          <path d="M77.742 213.126H82.516V208.702H83.58V213.126H88.298V221.302H87.276V220.756H77.658V219.776H87.276V217.368H78.4V216.402H87.276V214.106H77.742V213.126ZM87.43 209.304L88.34 209.724C87.892 210.704 87.304 211.642 86.576 212.552L85.666 212.076C86.394 211.152 86.982 210.228 87.43 209.304ZM78.736 209.43C79.506 210.396 80.094 211.25 80.514 211.978L79.66 212.566C79.226 211.782 78.638 210.914 77.882 209.962L78.736 209.43ZM99.512 208.464L100.492 208.8C100.198 209.36 99.876 209.864 99.54 210.312H103.32V211.292H90.79V210.312H94.626C94.346 209.724 94.052 209.206 93.716 208.73L94.78 208.548C95.088 209.066 95.396 209.654 95.704 210.312H98.434C98.84 209.724 99.204 209.108 99.512 208.464ZM95.648 221.316H94.542L94.276 220.322L95.326 220.364C95.69 220.364 95.872 220.126 95.872 219.664V218.362H92.75V221.428H91.77V212.426H96.852V219.888C96.852 220.84 96.446 221.316 95.648 221.316ZM92.75 217.466H95.872V215.87H92.75V217.466ZM92.75 214.974H95.872V213.364H92.75V214.974ZM101.094 221.274H99.232L99.022 220.308C99.61 220.35 100.184 220.378 100.744 220.378C101.136 220.378 101.332 220.154 101.332 219.734V212.034H102.34V219.986C102.34 220.84 101.92 221.274 101.094 221.274ZM98.42 213.084H99.4V219.118H98.42V213.084ZM110.208 209.402H116.648V215.94H110.208V209.402ZM115.64 214.96V210.368H111.216V214.96H115.64ZM106.4 208.702C107.324 209.402 108.094 210.116 108.738 210.83L108.052 211.53C107.478 210.858 106.694 210.144 105.7 209.388L106.4 208.702ZM104.72 212.846H107.716V219.02C108.164 218.628 108.64 218.166 109.158 217.648L109.424 218.712C108.612 219.524 107.758 220.238 106.848 220.868L106.456 219.972C106.652 219.804 106.75 219.608 106.75 219.384V213.812H104.72V212.846ZM111.706 216.78L112.602 217.214C111.902 218.852 111.076 220.266 110.124 221.47L109.242 220.826C110.208 219.706 111.034 218.348 111.706 216.78ZM115.066 216.738C116.172 218.292 117.026 219.65 117.614 220.812L116.746 221.414C116.13 220.154 115.304 218.768 114.254 217.256L115.066 216.738ZM121.73 213.574H119.504V209.122H125.454V213.574H122.71C122.682 214.19 122.64 214.75 122.584 215.282H125.594C125.594 217.718 125.524 219.216 125.384 219.804C125.244 220.728 124.572 221.204 123.354 221.204C123.158 221.204 122.85 221.19 122.402 221.162L122.164 220.266C122.57 220.294 122.92 220.322 123.214 220.322C123.914 220.322 124.334 220.014 124.446 219.412C124.53 219.062 124.572 217.998 124.6 216.22H122.458C122.304 217.088 122.122 217.788 121.898 218.32C121.38 219.496 120.526 220.518 119.336 221.372L118.692 220.574C119.77 219.832 120.54 218.95 120.988 217.914C121.184 217.466 121.338 216.892 121.464 216.22H118.972V215.282H121.59C121.646 214.75 121.702 214.19 121.73 213.574ZM127.036 209.794H128.016V218.516H127.036V209.794ZM129.64 221.274H127.652L127.428 220.308C128.086 220.35 128.702 220.378 129.29 220.378C129.724 220.378 129.948 220.126 129.948 219.622V208.604H130.956V219.874C130.956 220.798 130.508 221.274 129.64 221.274ZM124.488 212.65V210.032H120.47V212.65H124.488ZM138.306 210.116H139.818V208.52H140.77V210.116H142.8V208.52H143.752V210.116H145.334V211.026H143.752V212.818H145.656V213.756H137.942V212.818H139.818V211.026H138.306V210.116ZM140.77 212.818H142.8V211.026H140.77V212.818ZM144.718 214.876V221.428H143.766V220.742H139.916V221.414H138.95V214.876H144.718ZM139.916 219.832H143.766V218.222H139.916V219.832ZM139.916 217.326H143.766V215.772H139.916V217.326ZM134.61 208.59L135.59 208.786C135.464 209.262 135.324 209.71 135.184 210.144H137.816V211.11H134.82C134.428 212.076 133.98 212.958 133.462 213.742L132.636 213.224C133.546 211.824 134.204 210.284 134.61 208.59ZM134.19 212.972H137.522V213.882H136.052V215.604H137.998V216.528H136.052V219.818C136.724 219.594 137.396 219.272 138.096 218.852L138.278 219.748C137.354 220.252 136.276 220.672 135.072 221.008L134.652 220.14C134.932 220.056 135.072 219.916 135.072 219.72V216.528H133.154V215.604H135.072V213.882H134.19V212.972ZM152.194 209.122H158.662V212.776H152.194V209.122ZM157.696 211.894V210.018H153.16V211.894H157.696ZM151.424 216.402H154.798C154.882 215.926 154.924 215.436 154.938 214.904V214.848H151.788V213.91H159.166V214.848H155.932V214.904C155.918 215.436 155.876 215.94 155.806 216.402H159.6V217.34H156.24C156.996 218.684 158.172 219.762 159.768 220.574L159.096 221.358C157.444 220.406 156.24 219.188 155.498 217.704C155.316 218.236 155.092 218.698 154.812 219.118C154.112 220.084 152.992 220.84 151.424 221.4L150.878 220.546C152.39 220.014 153.454 219.3 154.056 218.432C154.252 218.096 154.42 217.732 154.56 217.34H151.424V216.402ZM148.512 208.702C149.436 209.402 150.22 210.116 150.864 210.83L150.178 211.53C149.59 210.858 148.806 210.144 147.798 209.388L148.512 208.702ZM146.818 212.846H149.842V218.964C150.234 218.586 150.64 218.166 151.088 217.69L151.354 218.754C150.598 219.566 149.8 220.28 148.96 220.896L148.568 220C148.764 219.818 148.876 219.622 148.876 219.398V213.812H146.818V212.846ZM162.876 218.334C163.184 218.334 163.45 218.46 163.646 218.726C163.828 218.978 163.926 219.3 163.926 219.706C163.926 220.322 163.744 220.868 163.38 221.344C163.016 221.792 162.526 222.1 161.938 222.254V221.568C162.302 221.442 162.596 221.232 162.82 220.952C163.016 220.658 163.128 220.35 163.128 220.014C163.072 220.042 162.96 220.07 162.82 220.07C162.582 220.07 162.386 219.986 162.218 219.818C162.05 219.65 161.966 219.44 161.966 219.202C161.966 218.936 162.05 218.726 162.218 218.572C162.386 218.404 162.596 218.334 162.876 218.334ZM182.91 208.562H183.876V209.472H187.348V210.298H183.876V211.236H186.844V212.048H183.876V213H187.698V213.84H179.13V213H182.91V212.048H180.082V211.236H182.91V210.298H179.522V209.472H182.91V208.562ZM181.16 217.368V218.39H185.682V217.368H181.16ZM185.682 216.584V215.548H181.16V216.584H185.682ZM181.16 219.174V221.4H180.194V214.722H186.648V220.182C186.648 220.938 186.242 221.316 185.458 221.316H184.282L184.044 220.42L185.164 220.462C185.5 220.462 185.682 220.294 185.682 219.972V219.174H181.16ZM176.596 208.716C177.534 209.416 178.318 210.13 178.962 210.844L178.276 211.544C177.688 210.872 176.89 210.158 175.882 209.402L176.596 208.716ZM174.902 212.846H177.87V218.992C178.29 218.6 178.724 218.166 179.2 217.676L179.466 218.74C178.682 219.552 177.842 220.28 176.974 220.91L176.582 220.014C176.792 219.818 176.904 219.608 176.904 219.37V213.812H174.902V212.846ZM190.512 212.678H194.838V211.782H189.364V210.914H194.838V209.906C193.424 209.99 191.954 210.06 190.414 210.116L190.246 209.29C193.886 209.178 197.106 208.968 199.892 208.66L200.2 209.5C198.856 209.64 197.4 209.752 195.846 209.85V210.914H201.348V211.782H195.846V212.678H200.186V217.326H195.846V218.292H200.858V219.104H195.846V220.154H201.544V221.036H189.168V220.154H194.838V219.104H189.868V218.292H194.838V217.326H190.512V212.678ZM199.206 216.514V215.38H195.846V216.514H199.206ZM194.838 216.514V215.38H191.478V216.514H194.838ZM191.478 214.596H194.838V213.49H191.478V214.596ZM195.846 213.49V214.596H199.206V213.49H195.846ZM214.914 208.702L215.418 209.598C214.186 210.074 212.828 210.368 211.316 210.452V213H215.838V213.966H214.382V221.442H213.388V213.966H211.316V215.632C211.246 218.04 210.714 219.958 209.706 221.386L208.992 220.63C209.818 219.426 210.266 217.76 210.336 215.632V209.64C212.03 209.612 213.556 209.29 214.914 208.702ZM203.252 209.78H205.926C205.73 209.332 205.52 208.926 205.282 208.562L206.318 208.394C206.528 208.814 206.724 209.276 206.92 209.78H209.566V210.704H203.252V209.78ZM203.112 212.958H204.722C204.512 212.398 204.26 211.866 203.98 211.376L204.876 211.054C205.142 211.572 205.394 212.202 205.618 212.958H207.158C207.438 212.342 207.676 211.698 207.886 211.026L208.796 211.334C208.572 211.936 208.334 212.482 208.068 212.958H209.65V213.868H206.948V215.436H209.412V216.36H206.948V220.322C206.948 221.078 206.542 221.456 205.73 221.456H204.974L204.764 220.518C204.988 220.56 205.198 220.588 205.394 220.588C205.758 220.588 205.94 220.42 205.94 220.084V216.36H203.336V215.436H205.94V213.868H203.112V212.958ZM204.316 217.116L205.24 217.312C204.876 218.726 204.358 219.958 203.714 221.008L202.874 220.476C203.532 219.468 204.008 218.348 204.316 217.116ZM208.334 217.018C208.754 217.928 209.09 218.754 209.314 219.51L208.474 219.832C208.208 218.95 207.886 218.082 207.494 217.242L208.334 217.018ZM229.082 210.69V221.26H228.046V220.616H223.538V221.302H222.53V210.69H224.644C224.826 209.99 224.966 209.248 225.064 208.478L226.086 208.618C225.974 209.36 225.834 210.046 225.638 210.69H229.082ZM223.538 219.636H228.046V216.08H223.538V219.636ZM223.538 215.1H228.046V211.656H223.538V215.1ZM221.76 214.092V215.114C221.228 215.394 220.696 215.66 220.164 215.898V220.028C220.164 220.868 219.744 221.288 218.904 221.288H217.686L217.462 220.308C217.84 220.336 218.204 220.364 218.554 220.364C218.946 220.364 219.142 220.154 219.142 219.762V216.332C218.54 216.556 217.924 216.78 217.308 216.976L217.07 215.968C217.77 215.786 218.47 215.576 219.142 215.324V212.104H217.21V211.138H219.142V208.604H220.164V211.138H221.704V212.104H220.164V214.904C220.71 214.652 221.242 214.372 221.76 214.092ZM231.854 209.122H235.872V217.494H231.854V209.122ZM234.906 216.598V213.742H232.834V216.598H234.906ZM232.834 212.832H234.906V210.032H232.834V212.832ZM236.992 213.826H242.872V217.494H236.992V213.826ZM241.892 216.612V214.722H237.986V216.612H241.892ZM238.728 210.06H236.726V209.122H243.166C243.138 210.732 243.026 211.768 242.844 212.23C242.634 212.86 242.13 213.182 241.332 213.21C241.024 213.21 240.674 213.196 240.282 213.168L240.002 212.286C240.478 212.314 240.884 212.342 241.22 212.342C241.64 212.328 241.906 212.104 241.99 211.67C242.074 211.404 242.116 210.872 242.144 210.06H239.694C239.498 211.586 238.546 212.706 236.81 213.406L236.278 212.566C237.734 212.034 238.546 211.208 238.728 210.06ZM232.61 218.138L233.506 218.376C233.198 219.552 232.82 220.574 232.358 221.47L231.434 221.148C231.882 220.35 232.274 219.342 232.61 218.138ZM235.956 218.348C236.208 219.23 236.432 220.182 236.628 221.204L235.662 221.428C235.48 220.336 235.27 219.384 235.032 218.558L235.956 218.348ZM238.938 218.236C239.316 219.132 239.652 220.112 239.932 221.176L238.966 221.4C238.7 220.28 238.378 219.3 238 218.446L238.938 218.236ZM241.822 217.998C242.62 219.09 243.236 220.056 243.656 220.868L242.844 221.442C242.396 220.546 241.794 219.552 241.038 218.474L241.822 217.998Z" fill="#9EA4B1" />
          <path d="M222.227 34.8127C222.521 34.19 223.406 34.19 223.575 34.8127L224.879 39.5991C225.005 40.0601 225.334 40.4235 225.78 40.5941L230.414 42.3652C231.017 42.5956 230.929 43.4763 230.281 43.7067L225.294 45.4778C224.814 45.6484 224.413 46.0119 224.195 46.4729L221.94 51.2593C221.646 51.8819 220.761 51.8819 220.591 51.2593L219.288 46.4729C219.162 46.0119 218.833 45.6484 218.387 45.4778L213.753 43.7067C213.15 43.4763 213.238 42.5956 213.886 42.3652L218.872 40.5941C219.353 40.4235 219.754 40.0601 219.971 39.5991L222.227 34.8127Z" fill="#F7F7F7" />
          <path d="M55.2272 139.813C55.5207 139.19 56.4057 139.19 56.5753 139.813L57.8792 144.599C58.0047 145.06 58.3338 145.424 58.7801 145.594L63.414 147.365C64.0168 147.596 63.9292 148.476 63.2805 148.707L58.2944 150.478C57.8142 150.648 57.4128 151.012 57.1955 151.473L54.9396 156.259C54.6461 156.882 53.7611 156.882 53.5914 156.259L52.2876 151.473C52.1621 151.012 51.833 150.648 51.3867 150.478L46.7528 148.707C46.15 148.476 46.2376 147.596 46.8862 147.365L51.8724 145.594C52.3526 145.424 52.754 145.06 52.9713 144.599L55.2272 139.813Z" fill="#F7F7F7" />
          <path d="M261.296 137.813C261.589 137.19 262.474 137.19 262.644 137.813L264.139 143.303C264.265 143.764 264.594 144.127 265.04 144.298L270.355 146.329C270.958 146.56 270.871 147.44 270.222 147.671L264.503 149.702C264.022 149.873 263.621 150.236 263.404 150.697L260.816 156.187C260.523 156.81 259.638 156.81 259.468 156.187L257.973 150.697C257.847 150.236 257.518 149.873 257.072 149.702L251.757 147.671C251.154 147.44 251.241 146.56 251.89 146.329L257.609 144.298C258.089 144.127 258.491 143.764 258.708 143.303L261.296 137.813Z" fill="#F7F7F7" />
          <path d="M240.616 79.8127C240.909 79.19 241.794 79.19 241.964 79.8127L242.671 82.4093C242.797 82.8703 243.126 83.2338 243.572 83.4044L246.086 84.3652C246.689 84.5956 246.601 85.4763 245.953 85.7067L243.248 86.6676C242.767 86.8382 242.366 87.2016 242.149 87.6626L240.925 90.2593C240.631 90.8819 239.746 90.8819 239.577 90.2593L238.869 87.6626C238.744 87.2016 238.415 86.8382 237.968 86.6676L235.455 85.7067C234.852 85.4763 234.939 84.5956 235.588 84.3652L238.293 83.4044C238.773 83.2338 239.175 82.8703 239.392 82.4093L240.616 79.8127Z" fill="#E4E5E6" />
          <path d="M95.759 58.8127C96.0524 58.19 96.9375 58.19 97.1071 58.8127L98.0031 62.1021C98.1287 62.5631 98.4578 62.9265 98.9041 63.0971L102.089 64.3143C102.691 64.5447 102.604 65.4254 101.955 65.6558L98.5285 66.873C98.0483 67.0436 97.6469 67.407 97.4296 67.868L95.8793 71.1574C95.5858 71.7801 94.7007 71.7801 94.5311 71.1574L93.6351 67.868C93.5095 67.407 93.1804 67.0436 92.7341 66.873L89.5496 65.6558C88.9468 65.4254 89.0343 64.5447 89.683 64.3143L93.1097 63.0971C93.5899 62.9265 93.9913 62.5631 94.2086 62.1021L95.759 58.8127Z" fill="#E4E5E6" />
          <path d="M63.0481 44.8127C63.3416 44.19 64.2266 44.19 64.3962 44.8127L65.5052 48.8838C65.6308 49.3448 65.9599 49.7082 66.4062 49.8788L70.3476 51.3853C70.9504 51.6157 70.8628 52.4964 70.2141 52.7268L65.9731 54.2332C65.4929 54.4038 65.0915 54.7673 64.8742 55.2282L62.9554 59.2994C62.6619 59.9221 61.7769 59.9221 61.6073 59.2994L60.4983 55.2283C60.3727 54.7673 60.0436 54.4038 59.5973 54.2332L55.6559 52.7268C55.0531 52.4964 55.1407 51.6157 55.7894 51.3853L60.0304 49.8788C60.5106 49.7082 60.912 49.3448 61.1293 48.8838L63.0481 44.8127Z" fill="#E4E5E6" />
          <defs>
            <filter id="filter0_f_2215_183427" x="120.246" y="153.096" width="110.349" height="49.8058" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
              <feFlood flood-opacity="0" result="BackgroundImageFix" />
              <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
              <feGaussianBlur stdDeviation="9.59562" result="effect1_foregroundBlur_2215_183427" />
            </filter>
            <filter id="filter1_f_2215_183427" x="171.652" y="84.5563" width="46.3786" height="111.492" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
              <feFlood flood-opacity="0" result="BackgroundImageFix" />
              <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
              <feGaussianBlur stdDeviation="9.59562" result="effect1_foregroundBlur_2215_183427" />
            </filter>
            <linearGradient id="paint0_linear_2215_183427" x1="184.115" y1="221.22" x2="184.115" y2="95.7509" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0F0F0" stop-opacity="0" />
              <stop offset="1" stop-color="#E3E3E3" />
            </linearGradient>
            <linearGradient id="paint1_linear_2215_183427" x1="177.135" y1="100.32" x2="177.135" y2="177.999" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F1F1F1" />
              <stop offset="1" stop-color="#E2E4E5" />
            </linearGradient>
            <linearGradient id="paint2_linear_2215_183427" x1="177.135" y1="100.32" x2="177.135" y2="177.999" gradientUnits="userSpaceOnUse">
              <stop stop-color="#ECEFF2" />
              <stop offset="1" stop-color="#7E7F80" />
            </linearGradient>
            <linearGradient id="paint3_linear_2215_183427" x1="151.432" y1="72.9043" x2="151.432" y2="177.999" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0F2F4" />
              <stop offset="1" stop-color="#E1E3E5" />
            </linearGradient>
          </defs>
        </svg>
        </div>
        <div className={styles.btn}>
          <svg xmlns="http://www.w3.org/2000/svg" width="36" height="35" viewBox="0 0 36 35" fill="none">
            <circle cx="17.4658" cy="18.5" r="2.75" stroke="white" stroke-width="1.5" />
            <mask id="path-2-inside-1_2175_5114" fill="white">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8494 10.9773L11.0304 10.9129C15.4689 9.33372 20.3162 9.33372 24.7546 10.9129L24.9356 10.9773C26.8745 11.6672 28.2914 13.3478 28.6436 15.3754L28.7086 15.7497L27.2308 16.0065L27.1657 15.6321C26.9062 14.1377 25.8618 12.899 24.4328 12.3905L24.2518 12.3261L24.7514 10.9219L24.2518 12.3261C20.1386 10.8626 15.6465 10.8626 11.5333 12.3261L11.3522 12.3905C9.92321 12.899 8.87886 14.1377 8.61928 15.6321L8.55425 16.0065C8.20019 18.0447 8.24674 20.1325 8.6913 22.153C8.9926 23.5224 10.0371 24.6068 11.3942 24.9593L12.429 25.228C16.0119 26.1586 19.7731 26.1586 23.356 25.228L24.3908 24.9593C25.748 24.6068 26.7924 23.5224 27.0937 22.153C27.5383 20.1325 27.5848 18.0447 27.2308 16.0065L28.7086 15.7497C29.0961 17.9801 29.0451 20.2645 28.5587 22.4753C28.1361 24.3959 26.6713 25.9168 24.7679 26.4111L23.7331 26.6799C19.9029 27.6746 15.8821 27.6746 12.052 26.6799L11.0172 26.4111C9.11376 25.9168 7.64891 24.3959 7.22634 22.4753C6.7399 20.2645 6.68897 17.9801 7.07638 15.7497L7.14141 15.3754C7.4936 13.3478 8.91056 11.6672 10.8494 10.9773Z" />
            </mask>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8494 10.9773L11.0304 10.9129C15.4689 9.33372 20.3162 9.33372 24.7546 10.9129L24.9356 10.9773C26.8745 11.6672 28.2914 13.3478 28.6436 15.3754L28.7086 15.7497L27.2308 16.0065L27.1657 15.6321C26.9062 14.1377 25.8618 12.899 24.4328 12.3905L24.2518 12.3261L24.7514 10.9219L24.2518 12.3261C20.1386 10.8626 15.6465 10.8626 11.5333 12.3261L11.3522 12.3905C9.92321 12.899 8.87886 14.1377 8.61928 15.6321L8.55425 16.0065C8.20019 18.0447 8.24674 20.1325 8.6913 22.153C8.9926 23.5224 10.0371 24.6068 11.3942 24.9593L12.429 25.228C16.0119 26.1586 19.7731 26.1586 23.356 25.228L24.3908 24.9593C25.748 24.6068 26.7924 23.5224 27.0937 22.153C27.5383 20.1325 27.5848 18.0447 27.2308 16.0065L28.7086 15.7497C29.0961 17.9801 29.0451 20.2645 28.5587 22.4753C28.1361 24.3959 26.6713 25.9168 24.7679 26.4111L23.7331 26.6799C19.9029 27.6746 15.8821 27.6746 12.052 26.6799L11.0172 26.4111C9.11376 25.9168 7.64891 24.3959 7.22634 22.4753C6.7399 20.2645 6.68897 17.9801 7.07638 15.7497L7.14141 15.3754C7.4936 13.3478 8.91056 11.6672 10.8494 10.9773Z" fill="white" />
            <path d="M11.0304 10.9129L11.6422 12.6324H11.6422L11.0304 10.9129ZM10.8494 10.9773L10.2376 9.25787L10.2376 9.25787L10.8494 10.9773ZM24.7546 10.9129L24.1428 12.6324L24.1428 12.6324L24.7546 10.9129ZM24.9356 10.9773L25.5474 9.25787L25.5474 9.25786L24.9356 10.9773ZM28.6436 15.3754L30.4418 15.063V15.063L28.6436 15.3754ZM27.2308 16.0065L25.4326 16.3188L25.745 18.1169L27.5431 17.8046L27.2308 16.0065ZM27.1657 15.6321L28.9639 15.3197V15.3197L27.1657 15.6321ZM24.4328 12.3905L25.0446 10.6711L25.0446 10.6711L24.4328 12.3905ZM24.2518 12.3261L22.5323 11.7143L21.9205 13.4338L23.64 14.0456L24.2518 12.3261ZM24.2518 12.3261L23.64 14.0456L25.3594 14.6574L25.9712 12.9379L24.2518 12.3261ZM11.5333 12.3261L12.1451 14.0456H12.1451L11.5333 12.3261ZM11.3522 12.3905L10.7404 10.6711L10.7404 10.6711L11.3522 12.3905ZM8.61928 15.6321L6.82114 15.3197L6.82114 15.3197L8.61928 15.6321ZM8.55425 16.0065L10.3524 16.3188L10.3524 16.3188L8.55425 16.0065ZM8.6913 22.153L6.90886 22.5452H6.90886L8.6913 22.153ZM11.3942 24.9593L10.9354 26.7258H10.9354L11.3942 24.9593ZM12.429 25.228L12.8878 23.4616L12.429 25.228ZM23.356 25.228L22.8972 23.4616L23.356 25.228ZM24.3908 24.9593L24.8496 26.7258L24.3908 24.9593ZM27.0937 22.153L25.3113 21.7608V21.7608L27.0937 22.153ZM27.2308 16.0065L26.9184 14.2083L25.1203 14.5207L25.4326 16.3188L27.2308 16.0065ZM28.5587 22.4753L30.3411 22.8675L28.5587 22.4753ZM24.7679 26.4111L25.2266 28.1776L24.7679 26.4111ZM23.7331 26.6799L23.2743 24.9134L23.7331 26.6799ZM12.052 26.6799L12.5107 24.9134L12.052 26.6799ZM11.0172 26.4111L10.5584 28.1776H10.5584L11.0172 26.4111ZM7.22634 22.4753L5.44391 22.8675L7.22634 22.4753ZM7.07638 15.7497L5.27824 15.4374L7.07638 15.7497ZM7.14141 15.3754L5.34327 15.063L7.14141 15.3754ZM10.4187 9.19344L10.2376 9.25787L11.4612 12.6968L11.6422 12.6324L10.4187 9.19344ZM25.3664 9.19344C20.5322 7.47345 15.2528 7.47345 10.4187 9.19344L11.6422 12.6324C15.685 11.194 20.1001 11.194 24.1428 12.6324L25.3664 9.19344ZM25.5474 9.25786L25.3664 9.19344L24.1428 12.6324L24.3239 12.6968L25.5474 9.25786ZM30.4418 15.063C29.9769 12.3868 28.1066 10.1684 25.5474 9.25787L24.3239 12.6968C25.6424 13.1659 26.606 14.3089 26.8455 15.6877L30.4418 15.063ZM30.5068 15.4374L30.4418 15.063L26.8455 15.6877L26.9105 16.0621L30.5068 15.4374ZM27.5431 17.8046L29.021 17.5479L28.3963 13.9516L26.9184 14.2083L27.5431 17.8046ZM25.3676 15.9444L25.4326 16.3188L29.0289 15.6941L28.9639 15.3197L25.3676 15.9444ZM23.821 14.11C24.6297 14.3977 25.2207 15.0987 25.3676 15.9444L28.9639 15.3197C28.5916 13.1767 27.0939 11.4002 25.0446 10.6711L23.821 14.11ZM23.64 14.0456L23.821 14.11L25.0446 10.6711L24.8635 10.6067L23.64 14.0456ZM23.0319 10.3101L22.5323 11.7143L25.9712 12.9379L26.4709 11.5337L23.0319 10.3101ZM25.9712 12.9379L26.4709 11.5337L23.0319 10.3101L22.5323 11.7143L25.9712 12.9379ZM12.1451 14.0456C15.8625 12.7229 19.9225 12.7229 23.64 14.0456L24.8635 10.6067C20.3546 9.00238 15.4304 9.00238 10.9215 10.6067L12.1451 14.0456ZM11.964 14.11L12.1451 14.0456L10.9215 10.6067L10.7404 10.6711L11.964 14.11ZM10.4174 15.9444C10.5643 15.0987 11.1553 14.3977 11.964 14.11L10.7404 10.6711C8.69111 11.4002 7.1934 13.1767 6.82114 15.3197L10.4174 15.9444ZM10.3524 16.3188L10.4174 15.9444L6.82114 15.3197L6.75611 15.6941L10.3524 16.3188ZM10.4737 21.7608C10.0801 19.9719 10.0389 18.1235 10.3524 16.3188L6.75611 15.6941C6.36147 17.966 6.41336 20.2931 6.90886 22.5452L10.4737 21.7608ZM11.853 23.1928C11.1605 23.013 10.6275 22.4596 10.4737 21.7608L6.90886 22.5452C7.35772 24.5852 8.91367 26.2007 10.9354 26.7258L11.853 23.1928ZM12.8878 23.4616L11.853 23.1928L10.9354 26.7258L11.9703 26.9945L12.8878 23.4616ZM22.8972 23.4616C19.6152 24.314 16.1698 24.314 12.8878 23.4616L11.9703 26.9945C15.854 28.0032 19.931 28.0032 23.8148 26.9945L22.8972 23.4616ZM23.932 23.1928L22.8972 23.4616L23.8148 26.9945L24.8496 26.7258L23.932 23.1928ZM25.3113 21.7608C25.1575 22.4596 24.6246 23.013 23.932 23.1928L24.8496 26.7258C26.8714 26.2007 28.4273 24.5852 28.8762 22.5452L25.3113 21.7608ZM25.4326 16.3188C25.7461 18.1235 25.7049 19.9719 25.3113 21.7608L28.8762 22.5452C29.3717 20.2931 29.4236 17.966 29.0289 15.6941L25.4326 16.3188ZM28.3963 13.9516L26.9184 14.2083L27.5431 17.8046L29.021 17.5479L28.3963 13.9516ZM30.3411 22.8675C30.8785 20.4251 30.9348 17.9013 30.5068 15.4374L26.9105 16.0621C27.2573 18.0588 27.2117 20.1039 26.7763 22.0831L30.3411 22.8675ZM25.2266 28.1776C27.7947 27.5106 29.771 25.4587 30.3411 22.8675L26.7763 22.0831C26.5012 23.3331 25.5479 24.3229 24.3091 24.6447L25.2266 28.1776ZM24.1918 28.4463L25.2266 28.1776L24.3091 24.6447L23.2743 24.9134L24.1918 28.4463ZM11.5932 28.4463C15.7242 29.5192 20.0608 29.5192 24.1918 28.4463L23.2743 24.9134C19.745 25.83 16.04 25.83 12.5107 24.9134L11.5932 28.4463ZM10.5584 28.1776L11.5932 28.4463L12.5107 24.9134L11.4759 24.6447L10.5584 28.1776ZM5.44391 22.8675C6.01404 25.4587 7.99036 27.5106 10.5584 28.1776L11.4759 24.6447C10.2371 24.3229 9.28379 23.3331 9.00877 22.0831L5.44391 22.8675ZM5.27824 15.4374C4.85025 17.9013 4.90652 20.4251 5.44391 22.8675L9.00877 22.0831C8.57329 20.1039 8.52769 18.0588 8.87452 16.0621L5.27824 15.4374ZM5.34327 15.063L5.27824 15.4374L8.87452 16.0621L8.93955 15.6877L5.34327 15.063ZM10.2376 9.25787C7.67845 10.1684 5.80814 12.3868 5.34327 15.063L8.93955 15.6877C9.17906 14.3089 10.1427 13.1659 11.4612 12.6968L10.2376 9.25787Z" fill="white" mask="url(#path-2-inside-1_2175_5114)" />
            <path d="M13.9658 11V10C13.9658 8.89543 14.8613 8 15.9658 8H19.9658C21.0704 8 21.9658 8.89543 21.9658 10V11" stroke="white" stroke-width="1.5" />
          </svg>
          <span onClick={() => {
            closeApp();
          }} className='text-white text-lg font-medium  '>
            重新拍照
          </span>
        </div>
      </div>}

      {!notPassed && <div className='w-auto h-full'>
        {/* 顶部缩略图 */}
        <div className='bg-[#F3F4F4] flex justify-between items-center px-3 pb-1'>
          <div className='flex gap-3 py-1'>
            {Array(thumbnailCount).fill(0).map((_, index) => <div onClick={() => {
              setSelectThumbnailsIndex(index);
              onSelectThumbnail?.(index,actionDetail[index]?.tool_details[0]?.output[0]?.子类别);
            }} className={`relative border-[2px] m-px p-px  duration-150  transition-all ${selectThumbnailsIndex === index ? ' rounded-lg  border-solid border-[#FE2C55] relative ' : 'border-[#F3F4F4]'} `} ><img className='w-[40px] bg-black shrink-0 h-[40px] rounded object-contain' src={thumbnails[index]} /> {selectThumbnailsIndex === index && <svg className='absolute bottom-[-8px] left-[50%] translate-x-[-50%] ' xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6" fill="none">
              <path d="M5.29289 5.29289C5.68342 5.68342 6.31658 5.68342 6.70711 5.29289L12 0H0L5.29289 5.29289Z" fill="#FE2C55" />
            </svg>} </div>)}
          </div>
          <svg onClick={() => {
            closeApp();
          }} className='shrink-0' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M6.06007 6.06004L17.9395 17.9394" stroke="#42464E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M17.94 6.06011L6.0606 17.9395" stroke="#42464E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        {((<div className={styles.contentDiv}>
          {/* 合规提示 */}
          <div className={`p-[10px] flex gap-[6px] items-center rounded-lg rounded-t-md  ${styles.tipBg}`}>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M17.3338 9.828C17.3338 14.4099 13.6194 18.1243 9.03749 18.1243C4.45558 18.1243 0.741211 14.4099 0.741211 9.828C0.741211 5.2461 4.45558 1.53174 9.03749 1.53174C13.6194 1.53174 17.3338 5.2461 17.3338 9.828Z" fill="#141414" fill-opacity="0.08" />
              <path d="M9.00032 17.3316C13.6027 17.3316 17.3336 13.6007 17.3336 8.99834C17.3336 4.39599 13.6027 0.665039 9.00032 0.665039C4.39795 0.665039 0.666992 4.39599 0.666992 8.99834C0.666992 13.6007 4.39795 17.3316 9.00032 17.3316Z" fill="#EE3F38" />
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.00032 15.9428C12.8356 15.9428 15.9448 12.8336 15.9448 8.99834C15.9448 5.16304 12.8356 2.05392 9.00032 2.05392C5.16501 2.05392 2.05588 5.16304 2.05588 8.99834C2.05588 12.8336 5.16501 15.9428 9.00032 15.9428ZM17.3336 8.99834C17.3336 13.6007 13.6027 17.3316 9.00032 17.3316C4.39795 17.3316 0.666992 13.6007 0.666992 8.99834C0.666992 4.39599 4.39795 0.665039 9.00032 0.665039C13.6027 0.665039 17.3336 4.39599 17.3336 8.99834Z" fill="#D7312A" />
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.91423 11.4249C10.1433 11.4249 10.329 11.6106 10.329 11.8397V12.9182C10.329 13.1473 10.1433 13.333 9.91423 13.333H8.83571C8.60662 13.333 8.4209 13.1473 8.4209 12.9182V11.8397C8.4209 11.6106 8.60662 11.4249 8.83571 11.4249H9.91423ZM9.91423 5.33252C10.1433 5.33252 10.329 5.51824 10.329 5.74733V10.1113C10.329 10.3404 10.1433 10.5261 9.91423 10.5261H8.83571C8.60662 10.5261 8.4209 10.3404 8.4209 10.1113V5.74733C8.4209 5.51824 8.60662 5.33252 8.83571 5.33252H9.91423Z" fill="#141414" fill-opacity="0.2" />
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49919 11.0099C9.72829 11.0099 9.91401 11.1956 9.91401 11.4247V12.5032C9.91401 12.7323 9.72829 12.918 9.49919 12.918H8.42067C8.19158 12.918 8.00586 12.7323 8.00586 12.5032V11.4247C8.00586 11.1956 8.19158 11.0099 8.42067 11.0099H9.49919ZM9.49919 4.91748C9.72829 4.91748 9.91401 5.1032 9.91401 5.33229V9.69628C9.91401 9.92538 9.72829 10.1111 9.49919 10.1111H8.42067C8.19158 10.1111 8.00586 9.92538 8.00586 9.69628V5.33229C8.00586 5.1032 8.19158 4.91748 8.42067 4.91748H9.49919Z" fill="white" />
            </svg>
            <span>由于合规问题，当前搜索结果仅为功能展示</span>
          </div>

          {/* 商品列表 */}
          <div className='mt-[6px] grid grid-cols-2 gap-[6px] '>
            {!Boolean(searchFinished[selectThumbnailsIndex]) && Array(6).fill(0).map((_, index) => renderPlaceholder(index))}
            {Boolean(searchFinished[selectThumbnailsIndex]) && outputGoods.length ? outputGoods.map((good, index) => renderGood(good, index)) : Array(6).fill(0).map((_, index) => renderGood({
              名称: '示例商品',
              类别: '',
              子类别: '',
              价格: '999',
              销量: '1000',
              图片链接: MockGood,
              mock: true
            }, index))}
          </div>

        </div>
        ))}
      </div>}

    </FloatingPanel>
  );
})
